<template>
<vs-modal :show.sync="showSettings" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t("recfiles.searchTerm")}}</h4>
  </div>
  <div class="modal-body" slot="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t("recfiles.roomName")}}</label>
        <div class="col-sm-8">
          <select class="form-control" v-model="searchOpt.roomName">
            <option v-for="option in roomsOptions">{{option}}</option>
          </select>
        </div>
        <div class="col-md-1">
          <button type="button" class="btn btn-default" @click.prevent="refresh">{{$t("common.clear")}}</button>
        </div>
      </div> 
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t("recfiles.startTime")}}</label>
        <div class="col-sm-10">
          <vs-datepicker 
            :value.sync="startTime"
            width="auto" 
            format="yyyy-MM-dd">
          </vs-datepicker>
        </div>
      </div> 
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t("recfiles.endTime")}}</label>
        <div class="col-sm-10">
          <vs-datepicker 
            :value.sync="stopTime"
            width="auto" 
            format="yyyy-MM-dd">
          </vs-datepicker>
        </div>
      </div>                       
    </form>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="doSearchRecords">{{$t("common.search")}}</button>
    <button type="button" class="btn btn-default" @click.prevent="doExitSearch">{{$t("common.quit")}}</button>
  </div>   
</vs-modal>
</template>

<script>
import ebus from 'libs/ebus.js'
import async from 'async'
import locales from './locales.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {http} from 'share/common/api.js'
import {isValidStart} from 'libs/utils.js'

export default{
  locales,
  data: function() {
    return {
      ipaddr: '',
      showSettings: '',
      startTime: '',
      stopTime: '',
      searchOpt: {
        startIndex: 0,
        pageCount: 1024,
        roomName: '',
        starttime: '',
        stoptime: ''
      },
      state: {
        listsLoading: false
      },
      roomsOptions: []
    }
  },
  computed: {
    validRoomName() {
      if (this.searchOpt.roomName === '') {
        return true;
      } else {
        return isValidStart(this.searchOpt.roomName)
      }
    },
    validStopTime() {
      return this.stopTime != ''
    }
  },
  methods: {
    refresh() {
      this.searchOpt.roomName = ''
    },
    doExitSearch() {
      console.log('doExitSearch')
      this.showSettings = false
    },
    onShow(val) {
      console.log(val)
      this.showSettings = true
      this.ipaddr = val
      this.doGetRooms()
    },
    doSearchRecords() {
      this.showSettings = false
      if ((!this.validRoomName)
      || (!this.validStopTime)) {
        return
      }
      if (this.startTime !== '') {
        this.searchOpt.starttime = this.startTime + 'T00:00:00'
      } else {
        this.searchOpt.starttime = ''
      }
      this.searchOpt.stoptime = this.stopTime + 'T23:59:59'
      this.state.listsLoading = true
      var url = '/dev/record/items?listName=records'
      for (var key in this.searchOpt) {
        url += '&' + key + '=' + this.searchOpt[key]
      }
      ebus.emit('show-url', url)
    },
    doGetRooms() {
      console.log('doGetRooms')
      async.waterfall([
        this.doLogin,
        this.getRecordRooms,
        ], function(err, result) {
          toast.w(this, this.$t('common.finish'), this.$t('error.unknown'))
        }.bind(this))
    },
    doLogin(cb) {
      http("http://" + this.ipaddr + ":6080", "/api/auth/login", "POST",{
        username: 'api',
        password: 'api'
      }).then(function(res){
        if(res && res.data && res.data.code === 0) {
          cb()
        }
      }.bind(this), function(err) {
        cb()
        toast.w(this, this.$t('common.fail'), this.$t('error.noResponse'))
      }.bind(this))
    },
    getRecordRooms() {
      http("http://" + this.ipaddr + ":6080", '/dev/record/items?listName=rooms', 'GET').then(function(res) {
        if(res && res.data && res.data.code === 0) {
          var rooms = res.data.data.rooms
          this.roomsOptions = _.map(rooms, function(item) {
            return item.roomName
          })
        }
      }.bind(this))
    },
    showState(title, text, type){
      msgbox.alert({
        title: title,
        text: text,
        type: type,
        showCancelButton: false,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t("common.cancel"),
        confirmButtonText: this.$t("common.confirm"),
        closeOnConfirm: false        
      },
      function() {
        setTimeout(function() {
          swal.close()
        }.bind(this), ) 
      }.bind(this))
    }
  },
  ready() {
    ebus.on('show-recorded-files', this.onShow)
    var now = new Date()
    var YY = now.getFullYear()
    var MM = now.getMonth() + 1
    if (MM < 10) MM = '0' + MM
    var DD = now.getDate()
    if (DD < 10) DD = '0' + DD
    this.startTime = YY + '-' + MM + '-' + DD
    this.stopTime = YY + '-' + MM + '-' + DD
  }
}
</script>